<template>
  <div class="productLibrary_container">
    <div class="productLibrary_container__top">
      <el-button type="success">发布商品</el-button>
    </div>
    <div class="productLibrary_container__middle">
      <div class="productLibrary_container__middle__ipt">
        <el-form :model="form" label-width="120px" style="display: flex">
          <el-form-item label="商品筛选 :">
            <el-input v-model="form.name" placeholder="输入商品名称" />
          </el-form-item>
          <el-form-item label="商品分类 :">
            <el-select v-model="form.region" placeholder="所有分类">
              <el-option label="生鲜" value="shanghai" />
              <el-option label="汉堡快餐" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品品牌 :">
            <el-select v-model="form.region" placeholder="全部">
              <el-option label="品牌1" value="shanghai" />
              <el-option label="品牌2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="productLibrary_container__middle__btn">
        <el-button type="success">筛选</el-button>
        <el-button type="success">导出</el-button>
      </div>
    </div>
    <div class="productLibrary_container__bottom">
      <div class="productLibrary_container__bottom__header">
        <el-button type="info">全部</el-button>
        <el-button type="info">销售中</el-button>
        <el-button type="info">下架中</el-button>
        <el-button type="info">售罄</el-button>
      </div>
      <div class="productLibrary_container__bottom__tableList">
        <el-table
          :data="tableData"
          style="width: 100%"
          :highlight-current-row="true"
          height="450"
        >
          <el-table-column
            v-for="item of tableColumn"
            :key="item.prop"
            :fixed="item.fixed || false"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
            :formatter="item.formatter"
          />

          <el-table-column label="封面图" align="center" width="160" prop="img">
            <el-image
              style="width: 60px; height: 60px"
              src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
            />
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="250"
            fixed="right"
          >
            <template #default>
              <el-button type="primary" size="small">修改</el-button>
              <el-button type="warning" size="small" @click="handleClick"
                >下架</el-button
              >
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="productLibrary_container__bottom__tableList__pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length + 1"
            :page-size="7"
            :hide-on-single-page="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";

const form = reactive({
  name: "",
});
const handleClick = () => {
  console.log("click");
};
const tableColumn = reactive([
  {
    prop: "id",
    label: "商品编号",
    width: 150,
    fixed: true,
  },
  {
    prop: "name",
    label: "商品名称",
    width: 120,
  },
  {
    prop: "specification",
    label: "商品分类",
    width: 120,
    formatter: (row, column, value) => {
      const specificationObject = {
        0: "店长推荐",
        1: "热门好物",
      };
      return specificationObject[value];
    },
  },
  {
    prop: "type",
    label: "商品规格",
    width: 120,
    formatter: (row, column, value) => {
      const typeObject = {
        0: "单规格",
        1: "多规格",
      };
      return typeObject[value];
    },
  },
  {
    prop: "states",
    label: "商品状态",
    width: 120,
    formatter: (row, column, value) => {
      const stateObject = {
        0: "未上架",
        1: "已上架",
      };
      return stateObject[value];
    },
  },
  {
    prop: "count",
    label: "可售库存",
    width: 120,
  },
  {
    prop: "totalSales",
    label: "总销量",
    width: 120,
  },
  {
    prop: "date",
    label: "创建时间",
    width: 150,
  },
]);

const tableData = [
  {
    date: "2016-05-03",
    id: 1,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 0,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-02",
    id: 2,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-04",
    id: 3,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 0,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-01",
    id: 4,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 0,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-08",
    id: 5,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 0,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-06",
    id: 6,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 0,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-07",
    id: 7,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-03",
    id: 1,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-02",
    id: 2,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 0,
    specification: 0,
    states: 0,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-04",
    id: 3,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-01",
    id: 4,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-08",
    id: 5,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-06",
    id: 6,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 0,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-07",
    id: 7,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 0,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-03",
    id: 1,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-02",
    id: 2,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-04",
    id: 3,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-01",
    id: 4,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-08",
    id: 5,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-06",
    id: 6,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-07",
    id: 7,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-03",
    id: 1,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-02",
    id: 2,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-04",
    id: 3,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-01",
    id: 4,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-08",
    id: 5,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-06",
    id: 6,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
  {
    date: "2016-05-07",
    id: 7,
    img: "https://www.mshxw.com/d/file/p/2023/01-01/ce0a7a12292820b3167b6a432918d2e4.jpeg",
    type: 1,
    specification: 0,
    states: 1,
    count: 99,
    totalSales: 150,
    name: "米饭",
  },
];
</script>
<style lang="scss" scoped>
.productLibrary_container {
  background-color: #fff;
  width: 95%;
  height: 800px;
  min-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  &__middle {
    background-color: #f5f5f5;
    margin: 20px 0;
    padding: 10px 0;

    &__btn {
      padding-left: 50px;
    }
  }
  &__bottom {
    &__header {
      margin: 20px;
    }
    &__tableList {
      &__pagination {
        display: flex;
        justify-content: end;
      }
    }
  }
}
</style>
